<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学生</title>
    <#-- 1. 引入bs的css样式-->
    <link rel="stylesheet" href="/webjars/bootstrap/3.4.1/css/bootstrap.min.css">
    <#-- 2. 引入jquery依赖-->
    <script src="/webjars/jquery/3.6.0/jquery.min.js"></script>
    <#--  3. 引入bs的js库-->
    <script src="/webjars/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <#--  4. 自定义格式-->
    <style>
        .table{
            text-align: center;
        }
        .panel-footer{
            padding: 15px 5px;
            padding-bottom: 0px;
        }
        #form0{
            padding:0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="panel panel-primary">
            <#-- 页头-->
            <div class="panel-heading">
                <h3 class="panel-title">
                    <h3>Dubbo + SSM + Freemarker + WebJars + BootStrap分布式架构整合</h3>
                </h3>
            </div>
            <#-- 内容-->
            <table class="table table-striped table-hover">
                <tr>
                    <td>学号</td>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>年龄</td>
                    <td>住址</td>
                    <td>所在班级</td>
                    <td>操作</td>
                </tr>
                <#list pr.rows as stud>
                <tr>
                    <td>${stud.sid}</td>
                    <td>${stud.sname}</td>
                    <td>${stud.sex}</td>
                    <td>${stud.age}</td>
                    <td>${stud.addr}</td>
                    <td>${stud.cname}</td>
                    <td>
                        <div class="btn-group">
                        <a  class="btn btn-success btn-sm" onclick="showDialog('${stud.sid}','${stud.sname}','${stud.sex}','${stud.age}','${stud.addr}','${stud.cid}')">
                            <span class="glyphicon glyphicon-pencil"></span>
                        </a>
                        <a href="/student/delete.do?sid=${stud.sid}" class="btn btn-danger btn-sm" onclick="return confirm('你真的要删除吗?')">
                            <span class="glyphicon glyphicon-trash"></span>
                        </a>
                        </div>
                    </td>

                </tr>
                </#list>
            </table>
            <#-- 页尾-->
            <div class="panel-footer text-right clearfix">
            <#-- 0. 条件查询页面    -->
            <form class="form-inline" style="float:left;" action="/student/search.do" method="post" id="form0">
                <input type="hidden" name="page" id="page" value="1">
                <div class="form-group">
                    <input type="text" class="form-control" name="sname" placeholder="学生姓名" value="${vo.sname!''}">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" name="addr" placeholder="学生住址" value="${vo.addr!''}">
                </div>
                <div class="form-group">
                    <div class="col-sm-10">
                        <select class="form-control" name="cid" id="cid">
                            <option value="0">所有班级</option>
                            <#list classes as c>
                                <#--  freemarker中的三元运算符的用法：
                                    方法一：${(c.cid==vo.cid)?then('selected','')}    // 适用于3.2.23以后的版本
                                    方法二：${(c.cid==vo.cid)?string('selected','')}  //  适用于3.2.23以前的版本
                                -->
                                <option value="${c.cid}" ${(c.cid==vo.cid)?then('selected','')}>${c.cname}</option>
                            </#list>
                        </select>
                    </div>
                </div>
                <button type="submit" class="btn btn-success" onclick="searchStudent()">
                    <span class="glyphicon glyphicon-search"></span>
                    查询
                </button>
            </form>
                <#--  2. 添加学生   -->
                <a  class="btn btn-info btn-sm " onclick="showDialog()" style="float:right;right:10px">
                    <span class="glyphicon glyphicon-plus-sign"></span>
                    添加学生
                </a>
                <#-- 1. 分页导航-->
                <nav >
                    <ul class="pagination" style="float:right;margin-top:0px;margin-right: 30px;">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                            <#-- 分页导航写在这里-->
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>

                </nav>


            </div>
        </div>
    </div>

    <div class="modal fade" id="myModal" >
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="title">编辑学生</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="form1" action="/student/add.do" method="post">
                        <input type="hidden" name="sid"  id = "sid">
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">姓名:</label>
                            <div class="col-sm-10">
                                <input type="text" name="sname" id="sname" class="form-control"  placeholder="姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">性别:</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="sex" id="sex1" value="男" checked> 男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="sex" id="sex2" value="女"> 女
                                </label>

                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">年龄:</label>
                            <div class="col-sm-10">
                                <input type="text" name="age" id="age" class="form-control"  placeholder="年龄">
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">住址:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="addr" name="addr" placeholder="住址">
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">班级:</label>
                            <div class="col-sm-10">
                                <select class="form-control" name="cid" id="cid">
                                    <option value="0">所有班级</option>
                                    <#list classes as c>
                                        <option value="${c.cid}">${c.cname}</option>
                                    </#list>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭(C)</button>
                    <button type="button" class="btn btn-primary" onclick="save()">保存(S)</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

<script>
    //1. 保存学生（添加或修改）
    function save(){
        //1.1 提交表单
        $("#form1").submit();
    }
    //2. 修改对话框
    function showDialog(sid,sname,sex,age,addr,cid) {
        //2.1 为表单设置值
        $("#sid").val(sid);
        $("#sname").val(sname);
        //设置性别
        if(sex == '男'){
            $("#sex1").prop("checked",true);
        }else{
            $("#sex2").prop("checked",true);
        }
        $("#age").val(age);
        $("#addr").val(addr);
        $("#cid").val(cid);

        //2.2  定义添加或修改的url地址
        let url = "/student/add.do";
        //2.2.1 判断sid是否有值
        if(sid){                    // sid有值，就是修改操作
            //① 设置url地址
            url = "/student/update.do"
            //② 修改标题
            $("#title").text("修改学生");

        }else{                      // sid无值，就是添加操作
            //① 修改标题
            $("#title").text("添加学生");
            //② 重置表单
            $("#form1")[0].reset();  // $("#form1")[0]: 将jquery对象转换为dom对象
        }
        //2.3 显示对话框
        $('#myModal').modal('show')

        //2.4 修改表单的url地址
        $("#form1")[0].action = url;
    }

    //3. 当窗体启动完成后自动执行
    $(function(){
        createNavBar();
    })

    //4. 开始查询学生( 情况一：点击超链接 情况二：点击查询按钮)
    function searchStudent(page) {
        //4.1 如果page有值，就为表单隐藏域赋值
        $("#page").val(page);
        //4.2 提交表单
        document.forms[0].submit();
    }

    //5. 生成分页导航
    function createNavBar() {
        //3.1 得到总分页数
        let totalPage = ${pr.totalPage};
        //3.2 遍历动态生成分页导航
        //3.2.1 定义分页导航字符串
        let navInfo = "";
        for (let i = 1; i <= totalPage ; i++) {
            //3.2.2 定义导航的样式名字
            let clssName = ""
            if(${pr.page} == i){
                clssName = "active";
            }
            //3.2.3 累加分页导航字符串
            navInfo += "<li class=" + clssName+ "><a href='javascript:void(0)' onclick='searchStudent("+i+")'>" + i +"</a></li>"
        }
        //3.3 将分页导航放到第一个li的后面
        $(".pagination li").first().after(navInfo);
    }
</script>